﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<style>
    .flow-demo {
        height: 400px;
        overflow: auto;
        font-size: 0;
    }

        .flow-demo li {
            display: inline-block;
            margin: 0 20px;
            font-size: 14px;
            width: 500px;
            margin-bottom: 20px;
            height: 200px;
            line-height: 100px;
            text-align: center;
            background-color: #ccc;
            
        }

        .flow-demo img {
            width: 100%;
            height: 100%;
        }

    .flow-demo-lazyimg {
        height: 300px;
        overflow: auto;
        text-align: center;
    }

        .flow-demo-lazyimg img {
            width: 40%;
            height: 200px;
            margin: 0 3px 5px 0;
            border: none;
        }
</style>
<h2>商品流式布局</h2>

<table class="layui-table">
    <tr>
        <td>商品商品商品</td>
        <td>技术</td>
        <td>新闻</td>
        <td>科技</td>
        <td>出行</td>
        <td>军事</td>
    </tr>

    <tr>
        <td></td>
        <td>技术</td>
        <td>新闻
            <li><img src="/imgs/03a1082a-901b-43c2-a25d-51d27f4887051.png" style="width:312px;" />

        </td>
        <td>科技</td>
        <td></td>
        <td>军事</td>
    </tr>
</table>
<div class="flow-demo" id="ID-flow-demo"></div>
<script>

    $(function () {
        flow();
    });

    var index = 1;
    var size = 2;
    var page = 0;//总页数

    function flow() { 
        layui.use(function () {
            var flow = layui.flow;
            // 流加载实例
            flow.load({
                elem: '#ID-flow-demo', // 流加载容器
                scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
                done: function (page, next) { // 执行下一页的回调
                    // 模拟数据插入
                    $.ajax({
                        url: 'https://localhost:7061/api/Product/GetProductFenYe?index='+index+'&size='+size,
                        type:'get',
                        success: function (res) { 
                            console.log(res);
                            var tr = '';
                            $(res.data).each(function (i,obj) { 
                                tr += `<li><img style="min-width:500px;width:500px;"  src="${obj.imgUrl}" />
                                 ${obj.name}-${obj.needJifen}   <button type="button" onclick="duihuan(${obj.id})" class="layui-btn layui-bg-purple">兑换</button>
                                </li>`;
                            });
                            index++;
                            page = Math.ceil(res.count / size);
                            next(tr, page < 10); // 此处假设总页数为 10
                        }
                    });


                    // setTimeout(function () {
                    //     var lis = [];
                    //     for (var i = 0; i < 8; i++) {
                    //         lis.push('<li><img style="min-width:500px;width:500px;"  src="/imgs/03a1082a-901b-43c2-a25d-51d27f4887051.png" /></li>')
                    //     }

                    //     // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //     // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    //     next(lis.join(''), page < 10); // 此处假设总页数为 10
                    // }, 520);
                }
            });
        });

    }

    function duihuan(id) {

        alert("您即将要兑换的商品id是:" + id);
        // id = 1000000;
        var productid = id; //取商品id
        var userName = Cookies.get("username");//从cookie读取的

        // Cookies.set(name: "zhagnsan", value: "lisi", { expires: 30 }); 取

        $.ajax({
            url: 'https://localhost:7061/api/Product/DuiHuan?userName=' + userName + '&productId=' + id,
            type: 'post',
            contentType: 'application/json',
            success: function (res) {
                alert(res);
                if (res == -1) {
                    alert("商品不存在");
                } if (res == -2) {
                    alert("商品下架了");
                } if (res == -3) {
                    alert("商品库存不足");
                } if (res == -4) {
                    alert("登录用户不存在");
                } if (res == -5) {
                    alert("您的积分不足");
                } if (res == -7) {
                    alert("网络原因");
                } if (res == 1) {
                    alert("恭喜您,兑换成功!");
                }
            }
        });
    }


</script>